import Layout from "../../components/layout"
import { Box, Heading, Divider, Text  } from '@chakra-ui/react'
import { css } from "@emotion/react"
import axios from 'axios'
import { baseURL } from '/axios.config'

const DetailContainer = css`
padding: 10px;
  & > p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  & > img {
    margin-bottom: 1;
    display: block;
  }
`
export default function Detail({detail}) {
  console.log(detail)
  return (
    <Layout>
      <Box maxW={1200} mx='auto' mt='40px'>
        <Heading mt='10px' as='h2' size='xl'>{detail.title}</Heading>
        <Heading as='h4' size='lg' color='gray.500'
        fontWeight='light'>{detail.sub}</Heading>
        <Divider mt='10px' />
        <Box overflow='hidden' mt='10px'>
          <Text float='left' >作者:{detail.author}</Text>
          <Text float='right'>发布时间:{detail.publish}</Text>
        </Box>
        <Divider mt='10px' />
      <Box css={DetailContainer} dangerouslySetInnerHTML={{__html: detail.content}}>
        </Box>
      </Box> 
    </Layout>
  )
}
// 获取到用户能够访问到所有的路由参数 getStaticPaths 
export async function getStaticPaths () {
  let {data} = await axios.get('/api/videos', { baseURL })
  let paths = data.map(id => ({params: {id}}))
return {
  paths,
  fallback: false
}
}
// 根据路由参数获取具体的数据 getStaticProps
export async function getStaticProps ({params}) {
  let id = params.id
  // /api/detai
  let {data: detail} = await axios.get(`/api/detail?id=${id}`, { baseURL })
  return {
    props: {
      detail
    }
  }
}